<template>
    <div class="container">
        <div class="left">
            <el-row class="tac">
                <el-col :span="100">
                    <el-menu :default-active="routerHis[activ].index" active-color="#fff" background-color="#000"
                        class="el-menu-vertical-demo" :collapse="isCollapse" text-color="#fff">
                        <!-- 顶部名字和图标 -->
                        <div class="name">
                            <img src="../../assets/image/logo.svg" alt="">
                            <Transition name="slide">
                                <div v-show="!isCollapse">校内资讯平台</div>
                            </Transition>
                        </div>
                        <!-- 有子菜单 -->
                        <el-sub-menu v-for="item in power" v-show="item.children" :index="item.meta.index">
                            <template #title>
                                <el-icon v-if="item.meta.value == '新闻专栏'">
                                    <Tickets />
                                </el-icon>
                                <span v-show="!isCollapse">{{ item.meta.value }}</span>
                            </template>
                            <el-menu-item-group v-show="item.children && title.path != ''" v-for="title in item.children"
                                @click="menuClick2(title.path, title.meta.value, item.meta.value, title.meta.index, item.path)">
                                <el-menu-item :index="title.meta?.index">
                                    <el-icon v-if="title.value == '删除用户'">
                                        <Delete />
                                    </el-icon>
                                    {{ title.meta?.value }}
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <!-- 无子菜单 -->
                        <el-menu-item v-for="item in power" v-show="!item.children"
                            @click="menuClick(item.path, item.meta.value, item.meta.index)" :index="item.meta.index">
                            <el-icon v-if="item.meta.value == '朋友聊天'">
                                <UserFilled />
                            </el-icon>
                            <el-icon v-if="item.meta.value == '组织管理'">
                                <OfficeBuilding />
                            </el-icon>
                            <el-icon v-if="item.meta.value == '用户管理'">
                                <Tools />
                            </el-icon>
                            <el-icon v-if="item.meta.value == '我的通知'">
                                <Message />
                            </el-icon>

                            <span v-show="!isCollapse">{{
                                item.meta.value }} </span>
                        </el-menu-item>

                    </el-menu>
                </el-col>
            </el-row>
        </div>
        <div class="right">

            <RightHeader :power="routerHis" v-model="isCollapse" v-model:activ="activ" :go="go"></RightHeader>
            <div class="content" v-loading="loading" element-loading-background="rgba(148, 148, 148, 0.521)">
                <router-view #default="{ route, Component }">
                    <keep-alive :include="['news', '权限管理', '朋友聊天']">
                        <component class="component" :is="Component"></component>
                    </keep-alive>
                </router-view>
            </div>

            <audio :muted="loop" ref="audio" src="../../../public/音频 (mp3cut.net).mp3"> </audio>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { ref, provide, onUnmounted, onMounted, nextTick } from "vue"
import RightHeader from './rightHeader.vue'
import router from '@/router'
import addRouters from "@/hooks/addRouters"
import { useWebSocket, routerHis, activ } from '@/hooks/index'
import { ElNotification } from 'element-plus'
import type { Response } from '@/type/friend'
import { useStore } from '@/stores/counter'
import { getlocalStorage } from "@/hooks/operationLocalStorage"
import { useRouter } from 'vue-router'
let loop = ref(true)


//绑定visibilitychange事件，visibilitychange可以监听用户是否切换浏览器标签页面
document.addEventListener('visibilitychange', function () {
    //visible那是证明页面切换回来了
    if (document.visibilityState === 'visible') {
        //查看当前本地存储的id是否一致，如果不一致，证明用户进行了新的账号登录
        let cont = getlocalStorage('counter')
        if (store.user.id != cont.user.id) {
            //强制刷新页面
            location.reload();
        }
    }
})


let routers: any = useRouter()
const store = useStore()
const friendsArr = ref<Response[]>([])
let audio: HTMLAudioElement | null = null
provide('friendsArr', friendsArr.value)
onMounted(() => {  
    audio = document.querySelector("audio")
    // audio.value?.play()
    // loop.value=true
    const overall = (e: any) => {
        console.log(e);
        
        if (e instanceof Array)
            if (e[0].type == "NOTICE") {
                ElNotification({
                    title: `通知`,
                    message: `你有${e.length}条未查看的通知请你前往查看`,
                    type: 'warning',
                    position: 'bottom-right',
                })
                loop.value = false;//取消静音
                // audio?.play();//音频播放
                return
            } else {
                friendsArr.value.push(...e)
                ElNotification({
                    title: '聊天',
                    message: `你有${e.length}条未读消息`,
                    type: 'warning',
                    position: 'bottom-right',
                })
                // audio?.play();//音频播放
                return
            }
        else {
            if (e.type == "NOTICE") {
                ElNotification({
                    title: `通知(${e.status})`,
                    message: `你有新的通知条，请前往通知请你前往查看`,
                    type: 'info',
                    position: 'bottom-right',
                })
                // audio?.play();//音频播放
            } else if (store.user.id != e.sendUserId && (routers?.currentRoute?.value!.href as string) != '/home/friend') {

                ElNotification({
                    title: '聊天',
                    message: `${e.sendUserName}发来一条消息`,
                    type: 'info',
                    position: 'bottom-right',
                })
                // audio?.play();//音频播放
            }
        }

    }
    let ws = useWebSocket('index', overall, store.user.id)
})


let isCollapse = ref<boolean>(true)            //菜单栏的隐藏显示
let loading = ref<boolean>(false)            //loading效果
//   //菜单栏权限集合（不含子权限）
let power: any = ref(addRouters(router, false, store.user.organizationId))


//菜单栏权限集合（包含子权限）
let powerChildren: any = ref([
    //     {                  
    //     "path": "/adms",
    //     "value": "权限管理",
    //     "index": "1",
    //     "children": [
    //         {
    //             "path": "/deleteadms",
    //             "value": "老师管理",
    //             "index": "1-1",
    //             "component": "deleteAdms"
    //         }
    //     ]
    // }
])
/**
 * 查看历史有没有点击过该菜单
 * @param value 
 */
const include = (value: string) => {
    let mark = false
    for (let i = 0; i < routerHis.value.length; i++) {
        if (routerHis.value[i].value == value) {
            activ.value = i
            mark = true
            break
        }
    }
    return mark ? 1 : 0
}
/**
 * 点击导航栏触发
 */
const menuClick = (path: string, value: string, index: string) => {
    if (!include(value)) {
        routerHis.value.push({
            value,
            path: '/home/' + path,
            parent: '',
            index
        })
        activ.value++
    }

    go('/home/' + path)
}
const menuClick2 = (path: string, value: string, parent: string, index: string, parentpath: string) => {
    
    
    if (!include(value)) {
        routerHis.value.push({
            value,
            path: '/home/' + parentpath + '/' + path,
            parent,
            index
        })
        activ.value++
    }

    go('/home/' + parentpath + '/' + path)
}
const go = (path: string) => {
    router.push({
        path: path
    })
}
</script>

<style lang=less  scoped>
:deep(.el-sub-menu .el-menu-item) {
    min-width: 0px !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}

.component {
    position: absolute;
    width: 97%;
    height: 97%;
    left: 50%;
    border-radius: 10px;
    top: 50%;

    box-sizing: border-box;
    transform: translate(-50%, -50%);
    background-color: @backColor ;
}

.content {
    position: relative;
    flex: 1;
    background-color: rgba(219, 219, 219, 0.13);
}

.tac {
    height: 100vh;
    // width: 63px;
    // overflow: hidden;
    // transition: all 0.4s linear;
}

:deep(.el-menu--vertical) {
    height: 100%;
    // width: 200px;
}



.container {
    display: flex;
    background-color: @backColor;

    .right {
        flex: 1;
        display: flex;
        flex-direction: column;

    }


}

.clors {
    color: #E4BD4F !important;
}

.whith {

    width: 200px;
}

.name {
    width: 100%;
    height: 50px;
    font-size: 20px;
    color: #ffff;
    .flexAc();
    justify-content: center;
    border-bottom: 2px solid rgb(167, 167, 167);

    img {
        width: 30px;
        aspect-ratio: 1/1;
    }

    div {
        overflow: hidden;

        height: 30px;
    }
}

:deep(.el-sub-menu) {
    overflow: hidden;
}
</style>